<template>
    <div>
        <ul>
            <li v-for="(item) in tags.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :key="item.id"
                :title="item.name" @click="$router.push({ name: 'gettagsofmusics' }); changeMusicId(item.id)">
                <img :src="item.coverImgUrl" alt="">
                <span>{{ item.name }}</span>
            </li>
        </ul>
        <!-- El 分页器组件 -->
        <section>
            <el-pagination background layout="prev, pager, next" :total="tags.length" :page-size="pageSize"
                v-model:current-page="currentPage" style="margin: auto;" />
        </section>
    </div>
</template>

<script>
import { getHighqualityTagsOfOne } from "@/api/topic"
export default {
    data() {
        return {
            // 存放每个模块下的歌单
            tags: [],
            // 每一页存放10首歌单
            pageSize: 10,
            // 当前页码
            currentPage: 1,
            // 总页数
            totalPage: 0
        }
    },
    // 从父组件中获取传递进来的
    props: ["tagesofone"],

    watch: {
        // 监听传递进来的数据，数据发生改变后，进行axios请求
        tagesofone(newvalue) {
            // 传递进来的数据作为参数进行axios请求
            getHighqualityTagsOfOne({ cat: newvalue }).then(res => {
                this.tags = res.playlists;
            })
            // 传递进来的数据发生改变后，将分页器当前页码重置为1
            this.currentPage = 1;
        }
    },
    methods: {
        // 创建一个方法触发父组件的changeTags方法，从而实现子组件改变父组件变量
        // id为所点击歌单的id
        changeMusicId(id) {
            // 将所点击的歌单id存放在本地硬盘中，防止加载GetTagsOfMusics.vue后，页面刷新时该歌单内的歌曲清空
            localStorage.setItem(`songListId`, id);
            // this.$emit('changeMusic', id);
        }
    },
    // 初始化一次，将“华语”渲染到页面上
    created(){
        getHighqualityTagsOfOne({ cat: localStorage.getItem("songsListName")||"华语" }).then(res => {
                this.tags = res.playlists;
                this.$emit('changeTitle',localStorage.getItem("songsListName"))
            })
    }
}
</script>

<style lang="scss" scoped>
ul {
    padding-left: 8%;
    margin-top: 10px;
    // overflow: hidden;
    li {
        float: left;
        margin-right: 9%;
        margin-bottom: 52px;
        list-style: none;
        width: 130px;
        height: 130px;
        cursor: pointer;
        span {
            width: 100%;
            display: block;
            margin-top: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        img {
            display: block;
            width: 100%;
            border-radius: 10px;
            margin-bottom: 8px;
        }
        img:hover{
            // position: relative;
            // top: -5px;
            // right: -5px;
            transform: scale(1.05,1.05);
            border: .5px solid #999;
            box-shadow: 5px 5px 5px #999;
        }
    }
    li:last-of-type{
        margin-right: 0;
    }
}
// 万能清除法去除ul的高度塌陷
ul::after{
		content:"";
		clear:both;
		display:block;
		height:0;
		overflow:hidden;
		visibility:hidden;
		}
section{
    width:fit-content;
    margin:6px auto;
}
</style>